<template>
  <components :factory="factory" :data="data" />
</template>
<script setup>
  import { ref, watch } from 'vue'
  import app from '@/app'
  import order from './order/index.vue'
  import ticket from './ticket/index.vue'
  import pay from './pay/index.vue'
  import supplier from './supplier/index.vue'
  import goods from './goods/index.vue'

  const props = defineProps(['factory', 'query'])
  const factory = props.factory
  const data = ref()
  const components = { order, ticket, pay, supplier, goods }[factory.getType()]

  const getTotal = () => {
    const query = props.query
    const where = query.where.split('-')

    // 通知子组件更新统计
    data.value = factory.getTotal( 
      where[0],
      parseInt(where[1] ?? 0), 
      app.time.load(query.day)
    )
  }

  watch(props, () => {
    getTotal()
  })

  getTotal()
</script>